<template>
  <div class="create">
    <h2 class="margin-bom title">{{title}}</h2>
    <div class="manageFrom">
      <!-- 表单校验 -->
      <el-form :model="device" :rules="rules" ref="device" status-icon>
        <el-form-item label="ip" prop="ip">
          <el-input type="text" v-model="device.ip"></el-input>
        </el-form-item>
        <el-form-item label="机房" prop="door">
          <el-input type="text" v-model="device.door"></el-input>
        </el-form-item>
        <el-form-item label="编号" prop="num">
          <el-input type="text" v-model="device.num"></el-input>
        </el-form-item>
        <el-form-item label="宽带">
          <el-input type="text" v-model="device.width"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio label="0" v-model="device.status">空闲</el-radio>
          <el-radio label="1" v-model="device.status">已出售</el-radio>
        </el-form-item>
        <el-form-item>
          <div class="text-center">
            <el-button type="primary" @click="createDevice()" v-if="id == ''">添加设备</el-button>
            <el-button type="success" @click="updateDevice()" v-if="id != ''">修改</el-button>
            <el-button @click="back()">返回</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import API from "../../common/js/api"
import ajax from "../../common/js/ajax"
import rels from "../../common/js/deviceRules"
export default {
  data() {
    return {
      id: "",
      title: "",
      device: {
        ip: "",
        door: "",
        num: "",
        width: "",
        status: "0"
      },
      rules: rels()
    };
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    createDevice() {
      this.$refs.device.validate(valid => {
        if (valid) {
          ajax(
            API.addDevice,
            "get",
            this.device,
            d => {
              this.$message({
                type: "success",
                message: "添加成功"
              });
              this.$router.replace("/index/device");
            },
            err => {
              this.$message({
                type:"warning",
                message:err.data.info
              })
            }
          );
        } else {
          this.$message({
            type: "warning",
            message: "请填写字段"
          });
        }
      });
    },
    updateDevice() {
      this.$refs.device.validate(valid => {
        delete this.device._id
        if (valid) {
          ajax(
            API.updateDevice,
            "get",
            this.device,
            d => {
              this.$message({
                type: "success",
                message: "修改成功"
              });
              this.$router.replace("/index/device");
            },
            err => {
              this.$message({
                type:"warning",
                message:err.data.info
              })
            }
          );
        } else {
          this.$message({
            type: "warning",
            message: "请填写字段"
          });
        }
      });
    }
  },
  mounted() {
    let len = Object.keys(this.$route.query);
    if (len.length == 0) {
      this.title = "新建设备";
    } else {
      this.title = "编辑设备";
      this.id = this.$route.query.id;
      ajax(
        API.findDevice,
        "get",
        { id: this.id },
        d => {
          this.device = d.data.data[0];
        },
        err => {
          alert(err.data.info);
        }
      );
    }
  }
};
</script>

<style scoped lang="stylus">
@import '../../common/css/index.styl';

.el-col {
  line-height: 40px;
}

.create >>> .el-row {
  min-width: 700px;
}

.create >>> .el-input {
  float: right;
  width: 89%;
}

.create >>> .el-textarea {
  float: right;
  width: 89%;
}

.create >>> .el-form-item__error {
  left: 100px;
}

.create >>> .el-form-item__content {
  text-align: left;
}

.create >>> .el-radio:last-child {
  margin-left: 0;
}

.create >>> .el-radio {
  margin-left: 50px;
}

.el-date-editor--date {
  margin-left: 45px !important;
  float: left !important;
  width: 30% !important;
}

.manageFrom {
  width: 60%;
  margin: 0 auto;
  min-width: 700px;
}
</style>